﻿<!DOCTYPE html> 
<html xmlns:fb="https://www.facebook.com/2008/fbml">
  <head> 
    <title> 
    </title> 
  </head> 
<body> 
    
<div id="fb-root"></div>
<script>    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=171571032974118";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));</script>


<div id="fb-root"></div>
<h2></h2><br />
<div id="user-info"></div>

@*<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>*@

<p><fb:login-button id="fb-auth" autologoutlink="true"></fb:login-button></p>

<script>
    window.fbAsyncInit = function () {
        FB.init({ appId: '171571032974118',
            status: true,
            cookie: true,
            xfbml: true,
            oauth: true
        });

        // Load the SDK Asynchronously
        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        } (document));

        function updateButton(response) {
            var button = document.getElementById('fb-auth');

            if (response.authResponse) {
                //user is already logged in and connected
                var userInfo = document.getElementById('user-info');
                FB.api('/me', function (response) {
                    userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + ' ' +response.name;
//                    button.innerHTML = 'Logout';
                });
                button.onclick = function () {
                    FB.logout(function (response) {
                        var userInfo = document.getElementById('user-info');
                        userInfo.innerHTML = "";
                    });
                };
            } else {
                //user is not connected to your app or logged out
                //                button.innerHTML = 'Login';
                userInfo.innerHTML = '';
                button.onclick = function () {
                    FB.login(function (response) {
                        if (response.authResponse) {
                            FB.api('/me', function (response) {
                                var userInfo = document.getElementById('user-info');
                                userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture" style="margin-right:5px"/>'  + response.name;
                            });
                        } else {
                            //user cancelled login or did not grant authorization
                        }
                    }, { scope: 'email' });
                }
            }
        }

        // run once with current status and whenever the status changes
        FB.getLoginStatus(updateButton);
        FB.Event.subscribe('auth.statusChange', updateButton);
    };

    (function () {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol
    + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    } ());

</script>
</body> 
</html>